<<<<<<< HEAD
<template>
    <div>
        <span class="demonstration">单据日期：</span>
        <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" style="width: 200px;">

        </el-date-picker>
        客户：
        <el-input style="width: 150px;margin-left: 0px;margin-right: 20px;" placeholder="请输入客户编号" v-model="input"
            clearable>
        </el-input>
        <el-button slot="reference" style="margin-left:-20px;margin-right:10px" @click="choose1 = true">...</el-button>
        供应商：
        <el-input style="width: 150px;margin-left: 0px;margin-right: 20px;" placeholder="请输入客户编号" v-model="input"
            clearable>
        </el-input>
        <el-button slot="reference" style="margin-left:-20px;margin-right:10px"
            @click="dialogFormVisible = true">...</el-button>
        <el-dialog top="20px" title="" :visible.sync="dialogFormVisible">

            <el-input v-model="input" placeholder="请输入客户编号或名称或联系人" style="width: 200px;margin-left: 20px;"></el-input>
            <el-checkbox v-model="checked" style="margin-left: 20px">显示禁用客户</el-checkbox>
            <el-button type="primary" style="margin-left: 20px">查询</el-button>
            <el-button type="" style="margin-left: 20px">刷新</el-button>
            <el-table :data="gridData">

                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column width="100" property="name" label="客户编号"></el-table-column>
                <el-table-column width="100" property="address" label="客户名称"></el-table-column>
                <el-table-column width="300" property="address" label="客户类别"></el-table-column>
                <el-table-column width="100" property="address" label="期初应收款"></el-table-column>
            </el-table>
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog top="20px" title="" :visible.sync="dialogFormVisible">

            <el-input v-model="input" placeholder="请输入客户编号或名称或联系人" style="width: 200px;margin-left: 20px;"></el-input>
            <el-checkbox v-model="checked" style="margin-left: 20px">显示禁用供应商</el-checkbox>
            <el-button type="primary" style="margin-left: 20px">查询</el-button>
            <el-button type="" style="margin-left: 20px">刷新</el-button>
            <el-table :data="gridData">

                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column width="100" property="name" label="编号"></el-table-column>
                <el-table-column width="100" property="address" label="名称"></el-table-column>
                <el-table-column width="300" property="address" label="类别"></el-table-column>
                <el-table-column width="100" property="address" label="期初应收款"></el-table-column>
            </el-table>
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>


        <el-dialog top="20px" title="" :visible.sync="choose1">
            <el-input v-model="input" placeholder="请输入客户编号或名称或联系人" style="width: 200px;margin-left: 20px;"></el-input>
            <el-checkbox v-model="checked" style="margin-left: 20px">显示禁用客户</el-checkbox>
            <el-button type="primary" style="margin-left: 20px">查询</el-button>
            <el-button type="" style="margin-left: 20px">刷新</el-button>
            <el-table :data="gridData">

                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column width="100" property="name" label="客户编号"></el-table-column>
                <el-table-column width="100" property="address" label="客户名称"></el-table-column>
                <el-table-column width="300" property="address" label="客户类别"></el-table-column>
                <el-table-column width="100" property="address" label="期初应收款"></el-table-column>
            </el-table>
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
        收/付款人：
        <el-select v-model="value" placeholder="收/付款人：" style="width: 120px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <el-button type="primary" style="margin-left: 20px">查询</el-button>

        <div style="margin-top: 10px">
            结算账户：
            <el-input style="width: 150px;margin-left: 0px;margin-right: 20px;" placeholder="结算账户：" v-model="input"
                clearable>
            </el-input>
            <el-button slot="reference" style="margin-left:-20px;margin-right:10px"
                @click="choose = true">...</el-button>

            备注：
            <el-input style="width: 150px;margin-left: 0px;margin-right: 20px;" placeholder="备注" v-model="input"
                clearable>
            </el-input>
            业务类型：
            <el-select v-model="value" placeholder="业务类型" style="width: 120px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <el-dialog top="20px" title="选择结算账户" :visible.sync="choose">
            <el-input v-model="input" placeholder="请输入账户编号货名称" style="width: 200px;margin-left: 20px;"></el-input>
            <el-checkbox v-model="checked" style="margin-left: 20px">显示禁用客户</el-checkbox>
            <el-button type="primary" style="margin-left: 20px">查询</el-button>
            <el-button type="" style="margin-left: 20px">刷新</el-button>
            <el-table :data="gridData">

                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column width="100" property="name" label="账户编号"></el-table-column>
                <el-table-column width="100" property="address" label="账户名称"></el-table-column>
                <el-table-column width="300" property="address" label="账户类别"></el-table-column>

            </el-table>
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
        <div style="clear: both"></div>
        <div style="clear: both;"></div>


        <hr style="margin-top: 10px">

        <h2 style="margin-left: 45%;">现金银行报表</h2>
        <div style="float: right;margin-top: -30px">
            <el-button type="">导出</el-button>

        </div>
        <br>
        <span style="font-size: 11px;">日期: 2014-12-04 至 2024-12-16</span>
        <el-table height="300px" :data="tableData" border style="width: 100%; font-size: 13px;margin-top: 10px;">
            <el-table-column fixed prop="date" label="账户编号" width="150">
            </el-table-column>
            <el-table-column prop="name" label="账户名称" width="120">
            </el-table-column>
            <el-table-column prop="date" label="日期" width="120">
            </el-table-column>
            <el-table-column prop="city" label="单据编号" width="120">
            </el-table-column>
            <el-table-column prop="address" label="业务类型" width="120">
            </el-table-column>
            <el-table-column prop="zip" label="收入" width="120">
            </el-table-column>
            <el-table-column prop="city" label="支出" width="120">
            </el-table-column>
            <el-table-column prop="address" label="账户余额" width="120">
            </el-table-column>
            <el-table-column prop="zip" label="往来单位" width="120">
            </el-table-column>
            <el-table-column prop="zip" label="收/付款人" width="120">
            </el-table-column>
            <el-table-column prop="zip" label="备注" width="120">
            </el-table-column>
        </el-table>
        <div style="width: 100%;background-color: blanchedalmond;height: 30px;">
            <table style="width: 78.7%;height: 30px;">
                <tr>
                    <td style="width: 50%;">合计：</td>
                    <td style="width: 50%;">123</td>
                </tr>
            </table>
        </div>

    </div>

</template>

<script>
import Top from './Top.vue';

export default {
    name: "WriteOff",
    components:
    {
        Top
    },
    data() {
        return {
            dialogFormVisible: false,
            choose: false,
            choose1: false,
            path: "",
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            gridData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: '200333'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1517 弄',
                zip: '200333'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1519 弄',
                zip: '200333'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1516 弄',
                zip: '200333'
            }],

            value1: '',
            value2: '',
        };
    },
    methods: {
        goto() {

            this.$router.push(this.path)
        }
    }

}
</script>

<style>
tr {
    border: 1px solid black;
}
=======
<template>
    <div>
        <span class="demonstration">单据日期：</span>
        <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" style="width: 200px;">

        </el-date-picker>
        客户：
        <el-input style="width: 150px;margin-left: 0px;margin-right: 20px;" placeholder="请输入客户编号" v-model="input"
            clearable>
        </el-input>
        <el-button slot="reference" style="margin-left:-20px;margin-right:10px" @click="choose1 = true">...</el-button>
        供应商：
        <el-input style="width: 150px;margin-left: 0px;margin-right: 20px;" placeholder="请输入客户编号" v-model="input"
            clearable>
        </el-input>
        <el-button slot="reference" style="margin-left:-20px;margin-right:10px"
            @click="dialogFormVisible = true">...</el-button>
        <el-dialog top="20px" title="" :visible.sync="dialogFormVisible">

            <el-input v-model="input" placeholder="请输入客户编号或名称或联系人" style="width: 200px;margin-left: 20px;"></el-input>
            <el-checkbox v-model="checked" style="margin-left: 20px">显示禁用客户</el-checkbox>
            <el-button type="primary" style="margin-left: 20px">查询</el-button>
            <el-button type="" style="margin-left: 20px">刷新</el-button>
            <el-table :data="gridData">

                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column width="100" property="name" label="客户编号"></el-table-column>
                <el-table-column width="100" property="address" label="客户名称"></el-table-column>
                <el-table-column width="300" property="address" label="客户类别"></el-table-column>
                <el-table-column width="100" property="address" label="期初应收款"></el-table-column>
            </el-table>
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog top="20px" title="" :visible.sync="dialogFormVisible">

            <el-input v-model="input" placeholder="请输入客户编号或名称或联系人" style="width: 200px;margin-left: 20px;"></el-input>
            <el-checkbox v-model="checked" style="margin-left: 20px">显示禁用供应商</el-checkbox>
            <el-button type="primary" style="margin-left: 20px">查询</el-button>
            <el-button type="" style="margin-left: 20px">刷新</el-button>
            <el-table :data="gridData">

                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column width="100" property="name" label="编号"></el-table-column>
                <el-table-column width="100" property="address" label="名称"></el-table-column>
                <el-table-column width="300" property="address" label="类别"></el-table-column>
                <el-table-column width="100" property="address" label="期初应收款"></el-table-column>
            </el-table>
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>


        <el-dialog top="20px" title="" :visible.sync="choose1">
            <el-input v-model="input" placeholder="请输入客户编号或名称或联系人" style="width: 200px;margin-left: 20px;"></el-input>
            <el-checkbox v-model="checked" style="margin-left: 20px">显示禁用客户</el-checkbox>
            <el-button type="primary" style="margin-left: 20px">查询</el-button>
            <el-button type="" style="margin-left: 20px">刷新</el-button>
            <el-table :data="gridData">

                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column width="100" property="name" label="客户编号"></el-table-column>
                <el-table-column width="100" property="address" label="客户名称"></el-table-column>
                <el-table-column width="300" property="address" label="客户类别"></el-table-column>
                <el-table-column width="100" property="address" label="期初应收款"></el-table-column>
            </el-table>
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
        收/付款人：
        <el-select v-model="value" placeholder="收/付款人：" style="width: 120px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <el-button type="primary" style="margin-left: 20px">查询</el-button>

        <div style="margin-top: 10px">
            结算账户：
            <el-input style="width: 150px;margin-left: 0px;margin-right: 20px;" placeholder="结算账户：" v-model="input"
                clearable>
            </el-input>
            <el-button slot="reference" style="margin-left:-20px;margin-right:10px"
                @click="choose = true">...</el-button>

            备注：
            <el-input style="width: 150px;margin-left: 0px;margin-right: 20px;" placeholder="备注" v-model="input"
                clearable>
            </el-input>
            业务类型：
            <el-select v-model="value" placeholder="业务类型" style="width: 120px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <el-dialog top="20px" title="选择结算账户" :visible.sync="choose">
            <el-input v-model="input" placeholder="请输入账户编号货名称" style="width: 200px;margin-left: 20px;"></el-input>
            <el-checkbox v-model="checked" style="margin-left: 20px">显示禁用客户</el-checkbox>
            <el-button type="primary" style="margin-left: 20px">查询</el-button>
            <el-button type="" style="margin-left: 20px">刷新</el-button>
            <el-table :data="gridData">

                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column width="100" property="name" label="账户编号"></el-table-column>
                <el-table-column width="100" property="address" label="账户名称"></el-table-column>
                <el-table-column width="300" property="address" label="账户类别"></el-table-column>

            </el-table>
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
        <div style="clear: both"></div>
        <div style="clear: both;"></div>


        <hr style="margin-top: 10px">

        <h2 style="margin-left: 45%;">现金银行报表</h2>
        <div style="float: right;margin-top: -30px">
            <el-button type="">导出</el-button>

        </div>
        <br>
        <span style="font-size: 11px;">日期: 2014-12-04 至 2024-12-16</span>
        <el-table height="300px" :data="tableData" border style="width: 100%; font-size: 13px;margin-top: 10px;">
            <el-table-column fixed prop="date" label="账户编号" width="150">
            </el-table-column>
            <el-table-column prop="name" label="账户名称" width="120">
            </el-table-column>
            <el-table-column prop="date" label="日期" width="120">
            </el-table-column>
            <el-table-column prop="city" label="单据编号" width="120">
            </el-table-column>
            <el-table-column prop="address" label="业务类型" width="120">
            </el-table-column>
            <el-table-column prop="zip" label="收入" width="120">
            </el-table-column>
            <el-table-column prop="city" label="支出" width="120">
            </el-table-column>
            <el-table-column prop="address" label="账户余额" width="120">
            </el-table-column>
            <el-table-column prop="zip" label="往来单位" width="120">
            </el-table-column>
            <el-table-column prop="zip" label="收/付款人" width="120">
            </el-table-column>
            <el-table-column prop="zip" label="备注" width="120">
            </el-table-column>
        </el-table>
        <div style="width: 100%;background-color: blanchedalmond;height: 30px;">
            <table style="width: 78.7%;height: 30px;">
                <tr>
                    <td style="width: 50%;">合计：</td>
                    <td style="width: 50%;">123</td>
                </tr>
            </table>
        </div>

    </div>

</template>

<script>
import Top from './Top.vue';

export default {
    name: "WriteOff",
    components:
    {
        Top
    },
    data() {
        return {
            dialogFormVisible: false,
            choose: false,
            choose1: false,
            path: "",
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            gridData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: '200333'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1517 弄',
                zip: '200333'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1519 弄',
                zip: '200333'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1516 弄',
                zip: '200333'
            }],

            value1: '',
            value2: '',
        };
    },
    methods: {
        goto() {

            this.$router.push(this.path)
        }
    }

}
</script>

<style>
tr {
    border: 1px solid black;
}
>>>>>>> 6be95d2b3200ab6fbb17d1e0a5a9b367f780cc8e
</style>